<template>
	<div class="wrap leftbar" @mouseover="comeOut()" @mouseout="goIn()">
		<Menu :active-name="active_name" :open-names='open_name'  style="height: 100%;position:fixed;top:70px;" @on-select='jumpTo'>
			<div v-for='(item,index) in menudata' :key ="index">
				<div v-if='!item.children'>
					<MenuItem :name='item.path'>					
							<i class="i-icon" v-if='item.img'><img class="imgicon" :src="item.img" alt=""></i>
							{{item.name}}				
					</MenuItem>
				</div>
				<div v-else>
					<Submenu :name="item.path">
						<template slot="title" style="display: inline-block;">						
								<i v-if='item.img'><img class="imgicon" :src="item.img" alt=""></i>
								{{item.name}}				
						</template>
						<MenuItem v-for='(data,index) in item.children' :name="data.path" :key ="index">					
								<span class="dot"></span>
								{{data.name}}			
						</MenuItem>
					</Submenu>
				</div>
			</div>
		</Menu>
		<div class="toright" v-show = "this.screen_with!='big'">
			<img src="/static/img/to_right.png"/>
		</div>
	</div>	
</template>
<script>
	export default {
		props:{
			screen_with:{
				type:String,
				required: true
			},
			menudata:{
				type:Array
			}
	    },
		created() {
			this.openmenu(this.$route.path,this.menudata)
		},
		data() {
				return {
					isshow: false,
					active_name:'',
					open_name:[]
				}
			},
			methods: {
				openmenu(path,data) {
					for(let i=0;i<data.length;i++) {
						if (data[i].path==path) {
							this.open_name=[]
							this.active_name=path
							break
						} else {
							if (data[i].children) {
								for(let j=0;j<data[i].children.length;j++) {
									if (data[i].children[j].path==path) {
										this.open_name=data[i].children
										this.active_name=path
										break;
									}
								}
							}
						}	
					}
					if (this.open_name) {
						let arr=[]
						for(let i=0;i<this.open_name.length;i++) {
							arr.push(this.open_name[i].path)
						}
						this.open_name=arr
					}
				},
				jumpTo: function(page) {
					this.$router.push(page)
				},
				comeOut() {
					if (this.screen_with!='big') {
						this.$emit('comeOut')
					}			
			    },
			    goIn() {
			    	if (this.screen_with!='big')
				        this.$emit('goIn')
			    }
			}
	}
</script>